<template>
	<view>
		<view class="header-wrapper">
			<image class="topbg" src="https://youlinapi.zhihui361.com/image/wx/helpbg.png" mode=""></image>
			<view class="header-top">
				<view class="header-inner fa"
					:style="{paddingTop: utils.menuButtonTop(), height: utils.menuButtonHeight(), background: opacity}">
					<image class="backimg" src="../../static/back2.png" mode="" @click="utils.pageBack()"></image>
					<view class="header-title">
						<view class="title-tabs fa">
							<view class="title-tab" :class="{active: index == titleTabsIndex}"
								v-for="(item, index) in titleTabsList" :key="index" @click="titleTabsChange(index)">
								{{item}}
							</view>
						</view>
					</view>
				</view>
				<view class="header-place"
					:style="{paddingTop: utils.menuButtonTop(), height: utils.menuButtonHeight()}"></view>
			</view>
		</view>
		<view class="form pr">
			<view class="address-wrapper">
				<view class="address-list fa jscb" :class="{andno :startAddressId == ''}" @click="pickSendAddress">
					<view class="flex1 flex" v-if="startAddressId">
						<image class="receive-icon" src="../../static/fetch.png" mode=""></image>
						<view class="flex1">
							<view class="fa">
								<view>{{addressSend.name}}</view>
								<view class="mobile">{{addressSend.phone}}</view>
							</view>
							<view class="address">
								{{addressSend.estate.address}}{{addressSend.building.name}}{{addressSend.details}}
							</view>
						</view>
					</view>
					<view class="flex1 flex" v-else>
						<image class="receive-icon" src="../../static/fetch.png" mode=""></image>
						<view class="noaddress">{{titleTabsIndex ? '请选择发货地址' : '请选择取件地址'}}</view>
					</view>
					<image class="right-icon" src="../../static/right.png" mode=""></image>
				</view>
				<view class="address-list fa jscb" :class="{andno :takeAddressId == ''}" @click="pickReceiveAddress">
					<view class="flex1 flex" v-if="takeAddressId">
						<image class="receive-icon" src="../../static/receive.png" mode=""></image>
						<view class="flex1">
							<view class="fa">
								<view>{{addressReceive.name}}</view>
								<view class="mobile">{{addressReceive.phone}}</view>
							</view>
							<view class="address">
								{{addressReceive.estate.address}}{{addressReceive.building.name}}{{addressReceive.details}}
							</view>
						</view>
					</view>
					<view class="flex1 flex" v-else>
						<image class="receive-icon" src="../../static/receive.png" mode=""></image>
						<view class="noaddress">请选择收货地址</view>
					</view>
					<image class="right-icon" src="../../static/right.png" mode=""></image>
					<view class="after" :class="{noaddr: takeAddressId}"></view>
				</view>
			</view>
			<view class="site-box">
				<view class="site-list flex">
					<view class="left">物品类型</view>
					<picker class="flex1" mode="selector" :range="cateList" :value="cateIndex" @change="cateChange">
						<view class="flex1 fa">
							<view class="flex1 tar ell1" v-if="isCate">请选择物品类型</view>
							<view class="flex1 tar ell1" v-else>{{cateList[cateIndex]}}</view>
							<image class="right-icon" src="../../static/right3.png" mode=""></image>
						</view>
					</picker>
				</view>
				<view class="site-list fa">
					<view class="left">货物重量</view>
					<view class="flex1 fa">
						<input class="flex1 tar" type="number" placeholder="请输入" v-model="weight" />
						<view>kg</view>
					</view>
				</view>
			</view>
			<view class="site-box">
				<view class="site-list fa jcsb" @click="selectTime">
					<view class="left">{{titleTabsIndex ? '发货时间' : '收货时间'}}</view>
					<view class="fa" v-if="startTime">
						<view class="time">{{weekList[weekIndex].week}} {{startTime}}~{{endTime}}</view>
					</view>
					<view v-else>{{titleTabsIndex ? '请选择发货时间' : '请选择收货时间'}}</view>
					<!-- <view class="fa" style="margin-top: 20rpx;">
						<uni-datetime-picker :hide-second="true" v-model="startTime" :border="false" />
						<view style="margin: 0 6rpx;">-</view>
						<uni-datetime-picker :hide-second="true" v-model="endTime" :border="false" />
						<image class="right-icon" src="../../static/right3.png" mode=""></image>
					</view> -->
				</view>
				<view class="title">备注</view>
				<textarea class="remark" placeholder="请输入备注信息" v-model="memo"></textarea>
				<view class="title">特殊要求</view>
				<view class="upload-wrapper">
					<textarea class="content" placeholder="请输入特殊要求" v-model="specialMemo"></textarea>
					<view class="upload-box flex fww">
						<view class="upload-list" v-for="(item, index) in imageList" :key="index"
							@click="uploadImage(index)">
							<image :src="item"></image>
						</view>
						<view class="upload-list" @click="uploadImage(-1)" v-if="imageList.length < 9">
							<image src="../../static/upload.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed-bottombar">
			<view class="bottombar-box fa jcc">
				<view class="confirm-button fa jcc" @click="confirmRelease">确认发布</view>
			</view>
			<view class="fixed-place"></view>
		</view>
		<uni-popup ref="timePop" type="bottom" :safe-area="false" :mask-click="true" border-radius="10px 10px 0 0">
			<view class="time-wrapper">
				<view class="time-title fa jcc">选择时间</view>
				<image class="close-icon" src="../../static/close.png" mode="" @click="timeClose"></image>
				<view class="week-box fa jcsb">
					<view class="week-list fa fdc jcc" :class="{active: weekIndex == index}"
						v-for="(item, index) in weekList" :key="index" @click="dateChange(index)">
						<view class="fz24">{{item.week}}</view>
						<view class="fwb">{{item.date}}</view>
					</view>
				</view>
				<view class="time-box-bg">
					<view class="time-box flex fww" v-if="timeList.length > 0">
						<view class="time-list" v-for="(item, index) in timeList" :key="index"
							@click="timeBoxChange(item, index)">
							<view class="time-inner" :class="[{disabled: item.disabled}, {selected: item.selected}]">
								{{item.timeStart}}-{{item.timeEnd}}
							</view>
						</view>
					</view>
					<view class="time-box flex fww" v-else>
						<view class="loading-text">加载中...</view>
					</view>
					<view class="time-btn" @click="timeConfirm">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import dayjs from '../../common/dayjs.js'
	export default {
		data() {
			const date = new Date()
			const year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()
			let hours = []
			let hour = date.getHours()
			// 如果当前时间小于8点，设置为8点；如果大于20点，设置为20点
			if (hour < 8) {
				hour = 8
			} else if (hour > 20) {
				hour = 20
			}
			let minutes = []
			const minute = date.getMinutes()
			if (month < 10) {
				month = '0' + month
			}
			if (day < 10) {
				day = '0' + day
			}
			const today = year + '-' + month + '-' + day
			for (let i = 8; i <= 20; i++) {
				if (i < 10) {
					hours.push('0' + i + '时')
				} else {
					hours.push(i + '时')
				}
			}
			for (let i = 0; i <= 59; i++) {
				if (i < 10) {
					minutes.push('0' + i + '分')
				} else {
					minutes.push(i + '分')
				}

			}
			const currentDate = this.getDate({
				format: true
			})
			return {
				opacity: 'rgba(255,255,255,0)',
				titleTabsList: ['帮我取', '帮我送'],
				titleTabsIndex: 0,
				addressSendId: 1,
				addressId: 1,
				addressSend: {},
				addressReceive: {},
				cateList: [],
				cateIndex: 0,
				isCate: 1, //1是未选择物品类型
				images: [],
				lock: true,
				startAddressId: '', //发货地址
				takeAddressId: '', //收货地址
				weight: '',
				startTime: '', //上门时间
				endTime: '',
				memo: '',
				specialMemo: '',
				imageList: [],
				vipEnd: '',
				indicatorStyle: `height: 50px;`,
				year,
				month,
				day,
				today,
				hours,
				hour,
				minutes,
				minute,
				// value: [hour, minute, 0, hour, minute],
				value: [],
				weekList: [],
				weekIndex: 0,
				startTimeBack: '',
				endTimeBack: '',
				startHour: '',
				startMinute: '',
				endHour: '',
				endMinute: '',
				timeList: [],
				timeIndex: -1
			};
		},
		onPageScroll(e) {
			this.opacity = 'rgba(24,201,84,' + this.utils.opacityCompute(e.scrollTop) + ')'
		},
		onLoad(options) {
			uni.$on("selectSendAddress", e => {
				console.log(e, '取件地址')
				this.addressSend = e
				this.startAddressId = e.accountAddressId
			})
			uni.$on("selectReceiveAddress", e => {
				console.log(e, '收件地址')
				this.addressReceive = e
				this.takeAddressId = e.accountAddressId
			})
			if (options.type) {
				this.titleTabsIndex = options.type
			}
			this.getListType()
			this.timeContent()
			this.$nextTick(() => {
				// 计算当前小时在8-20范围内的索引
				const hourIndex = this.hour - 8
				this.value = [hourIndex, this.minute, 0, hourIndex, this.minute]
			})
			this.startHour = this.hour
			this.startMinute = this.minute
			this.endHour = this.hour
			this.endMinute = this.minute
			this.startTimeBack = this.startHour + ':' + this.startMinute
			this.endTimeBack = this.endHour + ':' + this.endMinute
			this.getWeekList()
		},
		onShow() {
			this.getUserinfo()
		},
		onUnload: function() {
			uni.$off("selectSendAddress")
			uni.$off("selectReceiveAddress")
		},
		methods: {
			timeContent() {
				this.api.timeListContent().then(res => {
					if (res.code == 200) {
						this.timeList = res.data
						// 处理时间禁用状态
						this.processTimeDisabled()
						console.log('时间列表数据:', res.data);
					}
				}).catch(err => {
					console.error('获取时间列表失败:', err);
					// 如果API调用失败，使用默认时间列表
					this.processTimeDisabled()
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getTimeStemp(ymdArr) {
				let ymdDate = new Date(ymdArr[0], ymdArr[1], ymdArr[2]).getTime()
				return ymdDate
			},
			getDay(timestamp) {
				let date = new Date(timestamp)
				let month = date.getMonth() + 1
				let day = date.getDay()
				console.log(month)
				console.log(day)
				month = month < 10 ? '0' + month : month
				day = day < 10 ? '0' + day : day
				return `${month}-${day}`
			},
			// 获取今天明天这几天
			getWeekList() {
				let weeks = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
				for (let i = 0; i < 7; i++) {
					let item = {
						date: '',
						week: ''
					}
					item.date = dayjs().add(i, 'day').format('MM-DD');
					if (i == 0) {
						item.week = '今天'
					} else if (i == 1) {
						item.week = '明天'
					} else {
						let week = dayjs(item.date).day();
						item.week = weeks[week];
					}
					this.weekList.push(item)
				}
				this.today = this.year + '-' + this.weekList[this.weekIndex].date
				console.log(this.today)
			},
			selectTime() {
				this.$refs.timePop.open()
			},
			// 关闭时间弹窗
			timeClose() {
				this.$refs.timePop.close()
			},
			// 选择周几，不可选今天，最早明天送
			dateChange(index) {
				// if (index > 0) {
				this.weekIndex = index
				this.today = this.year + '-' + this.weekList[this.weekIndex].date
				// 重新处理时间禁用状态
				this.processTimeDisabled()
				// 重置时间选择
				this.timeIndex = -1
				this.timeList.forEach(item => {
					item.selected = 0
				})
				// }
			},
			// 处理时间禁用状态
			processTimeDisabled() {
				const now = new Date()
				const currentHour = now.getHours()
				const currentMinute = now.getMinutes()
				const currentTime = currentHour * 60 + currentMinute // 转换为分钟数

				// 处理时间列表
				this.timeList.forEach((item, index) => {
					// 确保每个时间段都有selected属性
					if (typeof item.selected === 'undefined') {
						item.selected = 0
					}

					// 如果选择的是今天，需要判断时间是否过期
					if (this.weekIndex === 0) { // 今天
						const [startHour, startMinute] = item.timeStart.split(':').map(Number)
						const startTime = startHour * 60 + startMinute

						// 如果当前时间已经超过了这个时间段的开始时间，则禁用
						if (currentTime >= startTime) {
							item.disabled = 1
						} else {
							item.disabled = 0
						}
					} else {
						// 选择的是明天及以后，所有时间段都可用
						item.disabled = 0
					}
				})
			},
			// picker-view选择时间
			bindTimeChange(e) {
				console.log(e)
				let timeDetail = e.detail.value
				// 将索引转换为实际小时数（8-20）
				this.startHour = timeDetail[0] + 8
				this.startMinute = timeDetail[1]
				this.endHour = timeDetail[3] + 8
				this.endMinute = timeDetail[4]
				if (this.startHour < 10) {
					this.startHour = '0' + this.startHour
				}
				if (this.startMinute < 10) {
					this.startMinute = '0' + this.startMinute
				}
				if (this.endHour < 10) {
					this.endHour = '0' + this.endHour
				}
				if (this.endMinute < 10) {
					this.endMinute = '0' + this.endMinute
				}
				this.startTimeBack = this.startHour + ':' + this.startMinute
				this.endTimeBack = this.endHour + ':' + this.endMinute
			},
			// 选择时间段
			timeBoxChange(item, index) {
				for (let i = 0; i < this.timeList.length; i++) {
					if (this.timeList[index].disabled) return false
					this.timeList[i].selected = 0
					if (i == index) {
						this.timeList[index].selected = 1
						this.timeIndex = i
					}
				}
			},
			// 选择时间弹窗点击确认
			timeConfirm() {
				console.log(this.today)
				this.$refs.timePop.close()

				// 检查是否选择了时间段
				if (this.timeIndex === -1) {
					uni.showToast({
						title: '请选择时间段',
						icon: 'none'
					})
					return
				}

				// 检查开始时间不能早于当前时间
				const now = new Date()
				const currentHour = now.getHours()
				const currentMinute = now.getMinutes()

				// 如果是今天，检查开始时间是否早于当前时间
				// if (this.weekIndex === 0 && (parseInt(this.startHour) < currentHour || (parseInt(this.startHour) ===
				// 		currentHour && parseInt(this.startMinute) < currentMinute))) {
				// 	uni.showToast({
				// 		title: '开始时间不能早于当前时间',
				// 		icon: 'none'
				// 	})
				// 	return
				// }

				// 使用选择的时间段
				this.startTime = this.timeList[this.timeIndex].timeStart
				this.endTime = this.timeList[this.timeIndex].timeEnd
			},
			// getWeeks() {
			// 	const date = new Date()
			// 	const year = date.getFullYear()
			// 	const month = date.getMonth() + 1
			// 	const day = date.getDate()
			// 	const week = date.getDay()
			// 	const ymdArr = [year, month, day]
			// 	if(month < 10) {
			// 		month = '0' + month
			// 	}
			// 	if(day < 10) {
			// 		day = '0' + day
			// 	}
			// 	for (let i = 0; i < 5; i++) {
			// 		let itemTemp = {}
			// 		if(i == 0) {
			// 			itemTemp.name = '明天'
			// 			itemTemp.date = month + '-' + day
			// 		}else {
			// 			if(week == 0) {
			// 				itemTemp.name = '周二'
			// 				itemTemp.date = this.getDay(this.getTimeStemp(ymdArr) + 1000 * 60 * 60 * 24 * (i + 1))
			// 			}else if(week == 1) {
			// 				itemTemp.name = '周三'
			// 				itemTemp.date = this.getDay(this.getTimeStemp(ymdArr) + 1000 * 60 * 60 * 24 * (i + 1))
			// 			}else if(week == 2) {
			// 				itemTemp.name = '周四'
			// 				itemTemp.date = this.getDay(this.getTimeStemp(ymdArr) + 1000 * 60 * 60 * 24 * (i + 1))
			// 			}else if(week == 3) {
			// 				itemTemp.name = '周五'
			// 				itemTemp.date = this.getDay(this.getTimeStemp(ymdArr) + 1000 * 60 * 60 * 24 * (i + 1))
			// 			}else if(week == 4) {
			// 				itemTemp.name = '周六'
			// 				itemTemp.date = this.getDay(this.getTimeStemp(ymdArr) + 1000 * 60 * 60 * 24 * (i + 1))
			// 			}else if(week == 5) {
			// 				itemTemp.name = '周日'
			// 				itemTemp.date = this.getDay(this.getTimeStemp(ymdArr) + 1000 * 60 * 60 * 24 * (i + 1))
			// 			}else if(week == 6) {
			// 				itemTemp.name = '周一'
			// 				itemTemp.date = this.getDay(this.getTimeStemp(ymdArr) + 1000 * 60 * 60 * 24 * (i + 1))
			// 			}
			// 		}
			// 		this.weekList.push(itemTemp)
			// 	}
			// },
			getUserinfo() {
				this.api.userinfoFunc().then(res => {
					if (res.code == 200) {
						this.vipEnd = res.data.vipEnd
					}
				})
			},
			// 选择帮取还是帮送
			titleTabsChange(index) {
				this.titleTabsIndex = index
			},
			pickSendAddress() {
				if (!uni.getStorageSync('token')) return this.utils.navTo('/pages/login/login')
				uni.navigateTo({
					url: '/pages/mine/address' + '?type=3'
				})
			},
			pickReceiveAddress() {
				if (!uni.getStorageSync('token')) return this.utils.navTo('/pages/login/login')
				uni.navigateTo({
					url: '/pages/mine/address' + '?type=4'
				})
			},
			// 获取物品类型
			getListType() {
				this.api.listTypeFunc().then(res => {
					if (res.code == 200) {
						res.data.forEach(item => {
							this.cateList.push(item.name)
						})
					}
				})
			},
			// 选择物品类型
			cateChange(e) {
				this.cateIndex = e.detail.value
				this.isCate = 0
			},
			// 上传图片
			uploadImage(index) {
				uni.chooseImage({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: result => {
						this.api.uploadFileFunc(result.tempFiles[0].path).then(res => {
							if (index < 0) {
								this.imageList.push(res.url)
							} else {
								this.imageList.splice(index, 1, res.url)
							}
						})
					}
				})
			},
			// 确认发布
			confirmRelease() {
				if (!uni.getStorageSync('token')) return this.utils.navTo('/pages/login/login')
				// if (!this.vipEnd) return uni.showModal({
				// 	title: '提示',
				// 	content: '开通会员后可免费发布，是否前往开通',
				// 	success: result => {
				// 		if (result.confirm) {
				// 			uni.navigateTo({
				// 				url: '/pages/mine/vip'
				// 			})
				// 		}
				// 	}
				// })
				if (!this.startAddressId) return uni.showToast({
					title: this.titleTabsIndex ? '请选择发货地址' : '请选择取件地址',
					icon: 'none'
				})
				if (!this.takeAddressId) return uni.showToast({
					title: '请选择收货地址',
					icon: 'none'
				})
				if (this.isCate) return uni.showToast({
					title: '请选择物品类型',
					icon: 'none'
				})
				if (!this.weight) return uni.showToast({
					title: '请输入重量',
					icon: 'none'
				})
				if (this.weight > 5) return uni.showToast({
					title: '货物重量不能超过5kg',
					icon: 'none'
				})
				if (!this.startTime || !this.endTime) return uni.showToast({
					title: this.titleTabsIndex ? '请选择发货时间' : '请选择收货时间',
					icon: 'none'
				})
				if (this.utils.transTimeStemp(this.startTime) > this.utils.transTimeStemp(this.endTime)) return uni
					.showToast({
						title: '请选择正确的时间',
						icon: 'none'
					})
				this.api.confirmOrderFunc({
					type: 1,
					secondType: this.titleTabsIndex,
					startAddressId: this.startAddressId,
					takeAddressId: this.takeAddressId,
					productType: this.cateList[this.cateIndex],
					weight: this.weight,
					day: this.today,
					receivingTime: this.startTime,
					receivingEndTime: this.endTime,
					memo: this.memo,
					specialMemo: this.specialMemo,
					specialMemoImg: this.imageList.join(),
					needPay: 0
				}).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功'
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/index/release_success' + '?id=' + res.data.ordersId
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.lock = true
					}
				}).catch(err => {
					uni.showToast({
						title: '提交失败',
						icon: 'none'
					})
					this.lock = true
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-wrapper {
		.topbg {
			position: fixed;
			top: 0;
			width: 100%;
		}

		.header-inner {
			position: fixed;
			z-index: 999;
			left: 0;
			right: 0;
			padding-bottom: 16rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;

			.backimg {
				width: 48rpx;
				height: 48rpx;
			}

			.header-title {
				position: absolute;
				left: 200rpx;
				right: 200rpx;

				.title-tab {
					position: relative;
					padding: 10rpx 25rpx;
					color: #fff;

					&.active {
						font-size: 34rpx;
						font-weight: bold;

						&::after {
							content: '';
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							width: 40rpx;
							height: 8rpx;
							border-radius: 140rpx 140rpx 140rpx 140rpx;
							background: linear-gradient(90deg, #FFFFFF 41%, rgba(255, 255, 255, 0) 100%);
						}
					}
				}
			}
		}

		.header-place {
			padding-bottom: 16rpx;
		}
	}

	.form {
		padding-bottom: 60rpx;
	}

	.address-wrapper {
		margin: 8rpx 28rpx 0;
		padding: 14rpx 30rpx 34rpx;
		border-radius: 16rpx;
		background-color: #fff;

		.address-list {
			position: relative;
			margin-top: 18rpx;

			&:last-child {
				.after {
					position: absolute;
					left: 23rpx;
					top: -30rpx;
					width: 2rpx;
					height: 40rpx;
					border-left: 2rpx dashed #BDBDBD;

					&.noaddr {
						top: -46rpx;
					}
				}
			}

			&.andno {
				padding: 20rpx 0;
			}

			.receive-icon {
				margin-right: 10rpx;
				width: 46rpx;
				height: 40rpx;
			}

			.mobile {
				margin-left: 36rpx;
			}

			.address {
				margin-top: 8rpx;
				font-size: 24rpx;
				color: #898989;
			}

			.right-icon {
				margin-left: 10rpx;
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.site-box {
		margin: 16rpx 24rpx 0;
		padding: 0 30rpx 2rpx;
		border-radius: 16rpx;
		background-color: #fff;

		.site-list {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #EDEDED;

			&:last-child {
				border-bottom: none;
			}

			.left {
				margin-right: 30rpx;
				color: #898989;
			}

			.right-icon {
				width: 36rpx;
				height: 36rpx;
			}

			input {
				margin-right: 14rpx;
			}

			.time {
				color: #FE3134;
			}
		}

		.title {
			margin-top: 30rpx;
			color: #898989;
		}

		.remark {
			margin-top: 26rpx;
			padding: 30rpx 32rpx;
			width: auto;
			height: 100rpx;
			border-radius: 16rpx;
			background-color: #F9F9F9;
		}

		.upload-wrapper {
			margin-top: 26rpx;
			margin-bottom: 36rpx;
			padding: 30rpx 26rpx;
			background-color: #F9F9F9;

			.upload-box {
				margin-top: 26rpx;
			}

			.content {
				width: auto;
				height: 100rpx;
				background-color: #F9F9F9;
			}

			.upload-list {
				margin-right: 16rpx;
				margin-bottom: 16rpx;
				width: 186rpx;
				height: 186rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}

				image {
					width: 186rpx;
					height: 186rpx;
				}
			}
		}
	}

	.fixed-bottombar {
		.bottombar-box {
			z-index: 88;
			position: fixed;
			bottom: env(safe-area-inset-bottom);
			left: 0;
			right: 0;
			padding: 0 28rpx;
			height: 120rpx;
			background-color: #fff;

			.confirm-button {
				width: 100%;
				height: 84rpx;
				border-radius: 42rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #fff;
				background: linear-gradient(270deg, #6CE083 0%, #3DBF63 100%);
			}
		}

		.fixed-place {
			height: 120rpx;
		}
	}

	.time-wrapper {
		position: relative;
		padding-bottom: 100rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;

		.time-title {
			padding: 42rpx 0 28rpx;
			font-size: 34rpx;
			font-weight: bold;
		}

		.close-icon {
			position: absolute;
			top: 42rpx;
			right: 26rpx;
			width: 36rpx;
			height: 36rpx;
		}

		.week-box {
			padding: 28rpx;

			.week-list {
				width: 112rpx;
				height: 112rpx;
				border-radius: 24rpx;

				&.active {
					color: #fff;
					background-color: #18C954;
				}
			}
		}

		.picker-box {
			margin-top: 20rpx;
			width: 650rpx;
			height: 500rpx;

			.item {
				line-height: 100rpx;
				text-align: center;
			}
		}

		.time-box-bg {
			background-color: #F9F9F9;
		}

		.time-box {
			padding: 2rpx 20rpx 20rpx;
			margin-left: -8rpx;
			margin-right: -8rpx;

			.loading-text {
				width: 100%;
				text-align: center;
				padding: 40rpx 0;
				color: #999;
				font-size: 28rpx;
			}

			.time-list {
				margin-top: 20rpx;
				padding: 0 8rpx;
				flex-basis: 33.33%;
				height: 80rpx;
				box-sizing: border-box;

				.time-inner {
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 10rpx;
					border: 2rpx solid #fff;
					text-align: center;
					font-size: 24rpx;
					background-color: #fff;
					box-sizing: border-box;

					&.disabled {
						color: #999;
					}

					&.selected {
						border: 2rpx solid #18C954;
						color: #18C954;
					}
				}
			}
		}

		.time-btn {
			margin: 48rpx 24rpx 0;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 44rpx;
			text-align: center;
			font-size: 34rpx;
			color: #fff;
			background: linear-gradient(270deg, #6CE083 0%, #3DBF63 100%);
		}
	}
</style>